<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/upload.js"></script>

</head>
<body>
<form action="upload/image" method="post" enctype="multipart/form-data">
    <input type="file" name="file"><button>上传</button>
</form>
<hr>
<div id="app">
    <upload></upload>
    <hr>
    <upload url="upload/user" width="200px" heigh="300px">
        <img width="200px" height="300px" style="object-fit: cover"
             src="https://img2.baidu.com/it/u=1822944461,3416051858&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
    </upload>
</div>

<h3>多文件上传</h3>
<form action="uploads/image" method="post" enctype="multipart/form-data">
    <input type="file" name="file"><br>
    <input type="file" name="file"><br>
<!--    multiple  多选模式 -->
    <input type="file" name="file" multiple><br>
    <button>上传</button>
</form>
<hr>
<!--请定义 uploads 组件-->
<uploads></uploads>


<script>
    var v = new Vue({
        el : "#app"
    })
</script>
</body>
</html>